
<!-- 个人中心 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>我的订单</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="../../xznstatic/css/element.min.css">
    <!-- 样式 -->
    <link rel="stylesheet" href="../../css/style.css" />
    <!-- 主题（主要颜色设置） -->
    <link rel="stylesheet" href="../../css/theme.css" />
    <!-- 通用的css -->
    <link rel="stylesheet" href="../../css/common.css" />
</head>
<style>
    html::after {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        content: '';
        display: block;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }
    #swiper {
        overflow: hidden;
    }
    #swiper .layui-carousel-ind li {
        width: 20px;
        height: 10px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0,0,0,.3);
        border-radius: 6px;
        background-color: #f7f7f7;
        box-shadow: 0 0 6px rgba(255,0,0,.8);
    }
    #swiper .layui-carousel-ind li.layui-this {
        width: 30px;
        height: 10px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0,0,0,.3);
        border-radius: 6px;
    }

    .index-title {
        text-align: center;
        box-sizing: border-box;
        width: 980px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .index-title span {
        padding: 0 10px;
        line-height: 1.4;
    }
    .center-container .layui-nav-tree {
        width: 100%;
    }
    .center-container .layui-nav {
        position: inherit;
    }
    .center-container .layui-nav-tree .layui-nav-item {
        height: 44px;
        line-height: 44px;
        font-size: 16px;
        color: rgba(17, 17, 17, 1);
        border-width: 0px 0px 1px 0px;
        border-style: solid;
        border-radius: 0;
        background-color: #fff;
        text-align: center;
    }
    .center-container .layui-nav-tree .layui-nav-bar {
        height: 44px !important;
        opacity: 0 !important;
    }
    .center-container .layui-nav-tree .layui-nav-item.layui-this {
        font-size: 16px;
        color: rgba(17, 17, 17, 1);
        border-width: 0;
        border-style: solid;
        border-radius: 0;
    }
    .center-container .layui-nav-tree .layui-nav-item:hover {
        font-size: 14px;
        color: #fff;
        border-width: 0;
        border-style: solid;
        border-radius: 0;
    }
    .center-container .layui-nav-tree .layui-nav-item a {
        line-height: inherit;
        height: auto;
        background-color: inherit;
        color: inherit;
        text-decoration: none;
    }
    .right-container {
        position: relative;
    }

    .right-container .layui-form-item {
        display: flex;
        align-items: center;
    }
    .right-container .layui-input-block {
        margin: 0;
        flex: 1;
    }
    .right-container .input .layui-input {
        padding: 0 12px;
        height: 40px;
        font-size: 15px;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        text-align: left;
    }
    .right-container .select .layui-input {
        padding: 0 12px;
        height: 40px;
        font-size: 15px;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        text-align: left;
    }
    .right-container .date .layui-input {
        padding: 0 12px;
        height: 40px;
        font-size: 15px;
        color: rgba(160, 67, 26, 1);
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        box-shadow: 0 0 0px rgba(255,0,0,.8);
        text-align: left;
    }


    .header {animation-name: fadeInUp; padding-bottom: 26px;padding-top: 70px;position:relative;border-bottom:1px solid rgba(0,0,0,0.1);margin-bottom:40px;}
    #plheader{ top: 48px;padding-bottom: 40px;width: 220px;position: relative;height: 70px;border-radius: 3px 3px 0px 0px;background-color: var(--publicMainColor);padding-top: 40px !important;}
    .header p.title {color: #fff;font-size: 25px;margin-bottom: 8px;text-align: left;white-space: nowrap;overflow: hidden;margin-left: 31px;font-weight: bold; padding-bottom: 8px;margin-top: 0px;width: 158px;border-bottom: 1px solid rgba(255, 255, 255, 0.16);letter-spacing:1px;}
    #category {padding-top: 136px;margin-left: 0px;padding-bottom: 30px;width: 205px;float: left;padding-left: 15px;text-align: left;margin-top: -120px;background-color: var(--publicMainColor);border-radius: 0px 0px 3px 3px;}
    .header p.subtitle {font-family:HELVETICANEUELTPRO-THEX, "微软雅黑";letter-spacing: 1px;font-size: 15px;display: inline-block;padding-top: 0px;color: #ffffff; margin-top: 0px; margin-right:31px;float: right;overflow: hidden;width: 156px;text-align: left;}
    #category a.active::before {display: none;}
    #category a.active::after {display:none;}
    #category a.active, #category a:hover {background: var(--publicSubColor);color: #FFFFFF;border-color: #838383;transition: 0.3s; transform-origin: bottom;}
    #category li {height:auto;position:relative;float:none; display:block;margin-top:1px;margin-bottom:1px;line-height:43px;border-bottom: 1px solid rgba(255, 255, 255, 0.05);padding-left: 15px;margin-right:16px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
    #category li:last-child { border-bottom:none;}
    #category a { border:0px; background:none; color:#CFDCF9; font-size:14px; position:relative; padding:0;line-height: 42px;height: 42px;}
    #category a::before { content:''; position:absolute; content: '';position: absolute;width: 190px;background-color: #AEAEAF;height: 42px;background: transparent;left: -16px;position: absolute;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
    #category a.active::before {display: none;}
    #category li:hover {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
    #category .bbbb, #category li .aaaa {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;background: var(--publicSubColor);color: #FFFFFF;  transition: 0.3s; transform-origin: bottom;}
    #category li:hover ul li{width: 136px;}
    #category li:hover ul li a{color: rgba(255, 255, 255, 0.45);width: 136px;overflow: hidden;    background-color: rgb(34, 73, 160);    padding-left:0px;}
    #category li ul li:hover a{  padding-left:0px; margin-left: 0px;}
    #category li:hover a{color:#fff}
</style>
<body>
<div id="app">
    <!-- 轮播图 -->
    <div class="layui-carousel" id="swiper" :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
        <div carousel-item>
            <div v-for="(item,index) in swiperList" :key="index">
                <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
            </div>
        </div>
    </div>
    <!-- 轮播图 -->

    <!-- 标题 -->
    <!-- <h2 style="margin-top: 20px;" class="index-title">USER / CENTER</h2>
    <div class="line-container">
        <p class="line" style="background: #EEEEEE;"> 个人中心 </p>
    </div> -->

    <!-- 标题 -->

    <div class="center-container">
        <!-- 个人中心菜单 config.js-->
        <div style=" width:auto; margin:-47px 10px 0px auto">
            <div class="header" id="plheader">
                <p class="title">我的订单</p>
                <p class="subtitle">MY/DINGDAN</p>
            </div>
            <ul id="category">
                <li v-for="(item,index) in centerMenu" v-bind:key="index" :class="index==0?'bbbb':''">
                    <a :href="'javascript:jump(\''+item.url+'\')'" style="color:#FFFFFF;" :class="index==0?'aaaa':''">{{item.name}}</a>
                </li>
            </ul>
        </div>            <!-- 个人中心菜单 -->
        <!-- 个人中心 -->
        <div class="right-container sub_borderColor" :style='{"padding":"20px","boxShadow":"0px rgba(255,0,0,.8)","margin":"0","backgroundColor":"#fff","borderRadius":"0","borderWidth":"1px","borderStyle":"solid"}'>
            <div class="purchase-btn-container" style="margin-top: 20px; text-align: center;">



                <div data-v-1ba59853="" data-v-543a544f="" class="main-content router-view">
                    <div data-v-1ba59853="">
                        <form data-v-1ba59853="" class="el-form form-content el-form--inline">
                            <div data-v-1ba59853="" class="slt el-row" style="margin-left: -10px; margin-right: -10px; justify-content: flex-start;">
                                <div data-v-1ba59853="" class="el-form-item el-form-item--medium">
                                    <!----><div class="el-form-item__content">
                                    <div data-v-1ba59853="" class="el-input el-input--medium el-input--prefix el-input--suffix">
                                        <!----><input type="text" autocomplete="off" placeholder="合同唯一编号"
                                                      class="el-input__inner"
                                                      style="text-align: left; height: 36px; line-height: 36px; color: rgb(51, 51, 51); font-size: 14px; border-width: 1px; border-style: none none solid; border-color: rgb(220, 223, 230); border-radius: 0px; background-color: rgb(255, 255, 255);"><span
                                            class="el-input__prefix" style=""><i class="el-input__icon el-icon-search"
                                                                                 style="line-height: 36px;"></i></span>
                                        <!----><!----><!---->
                                    </div><!---->
                                </div>
                                </div>
                                </div>
                                <di data-v-1ba59853="" class="el-form-item el-form-item--medium"><!---->
                                    <div class="el-form-item__content">
                                        <div data-v-1ba59853="" class="el-select el-select--medium"><!---->
                                            <div class="el-input el-input--medium el-input--suffix"><!----><input
                                                    type="text" readonly="readonly" autocomplete="off"
                                                    placeholder="请选择是否支付" class="el-input__inner"
                                                    style="text-align: left; height: 36px; line-height: 36px; color: rgb(51, 51, 51); font-size: 14px; border-width: 1px; border-style: none none solid; border-color: rgb(220, 223, 230); border-radius: 0px; background-color: rgb(255, 255, 255);">
                                                <!----><span class="el-input__suffix" style=""><span
                                                        class="el-input__suffix-inner"><i
                                                        class="el-select__caret el-input__icon el-icon-arrow-up"
                                                        style="line-height: 36px;"></i><!----><!----><!----><!---->
                                                    <!----></span><!----></span><!----><!----></div>
                                        </div><!----></div>
                                </di>

                                <div data-v-1ba59853="" class="el-form-item el-form-item--medium"><!---->
                                    <div class="el-form-item__content">
                                        <button data-v-1ba59853="" type="button"
                                                class="el-button el-button--success el-button--medium"
                                                style="height: 36px; color: rgb(255, 255, 255); font-size: 14px; border-width: 0px; border-style: solid; border-radius: 4px; background-color: rgb(0, 150, 136);">
                                            <!----><!----><span>查询<i data-v-1ba59853=""
                                                                     class="el-icon-search el-icon--right"></i></span>
                                        </button><!----></div>
                                </div>
                        </form>
                        <div data-v-1ba59853="" class="table-content">
                            <div data-v-1ba59853=""
                                 class="el-table tables el-table--fit el-table--border el-table--scrollable-x el-table--enable-row-hover el-table--enable-row-transition el-table--mini"
                                 style="width: 100%; font-size: 14px; color: rgb(96, 98, 102);">

                                <div class="el-table__header-wrapper">
                                    <table cellspacing="0" cellpadding="0" border="0" class="el-table__header"
                                           style="width: 1640px;">
                                        <colgroup>
                                            <col name="el-table_1_column_1" width="50">
                                            <col name="el-table_1_column_2" width="50">
                                            <col name="el-table_1_column_3" width="80">
                                            <col name="el-table_1_column_4" width="80">
                                            <col name="el-table_1_column_5" width="80">
                                            <col name="el-table_1_column_6" width="80">
                                            <col name="el-table_1_column_7" width="80">
                                            <col name="el-table_1_column_8" width="200">
                                            <col name="el-table_1_column_9" width="80">
                                            <col name="el-table_1_column_10" width="80">
                                            <col name="el-table_1_column_11" width="80">
                                            <col name="el-table_1_column_12" width="80">
                                            <col name="el-table_1_column_13" width="80">
                                            <col name="el-table_1_column_14" width="80">
                                            <col name="el-table_1_column_15" width="80">
                                            <col name="el-table_1_column_16" width="80">
                                            <col name="el-table_1_column_17" width="300">
                                            <col name="gutter" width="0">
                                        </colgroup>
                                        <thead class="has-gutter">
                                        <tr class="" style="color: rgb(144, 147, 153);">

                                            <th colspan="1" rowspan="1"
                                                class="el-table_1_column_2     is-leaf el-table__cell"
                                                style="background-color: rgb(255, 255, 255);">
                                                <div class="cell">索引</div>
                                            </th>


                                            <th colspan="1" rowspan="1"
                                                class="el-table_1_column_5  is-center   is-leaf is-sortable el-table__cell"
                                                style="background-color: rgb(255, 255, 255);">
                                                <div class="cell">合同唯一编号<span class="caret-wrapper"><i
                                                        class="sort-caret ascending"></i><i
                                                        class="sort-caret descending"></i></span></div>
                                            </th>

                                            <th colspan="1" rowspan="1"
                                                class="el-table_1_column_7  is-center   is-leaf is-sortable el-table__cell"
                                                style="background-color: rgb(255, 255, 255);">
                                                <div class="cell">是否支付<span class="caret-wrapper"><i
                                                        class="sort-caret ascending"></i><i
                                                        class="sort-caret descending"></i></span></div>
                                            </th>
                                            <th colspan="1" rowspan="1"
                                                class="el-table_1_column_8  is-center   is-leaf is-sortable el-table__cell"
                                                style="background-color: rgb(255, 255, 255);">
                                                <div class="cell">合同文件<span class="caret-wrapper"><i
                                                        class="sort-caret ascending"></i><i
                                                        class="sort-caret descending"></i></span></div>
                                            </th>




                                            <th colspan="1" rowspan="1"
                                                class="el-table_1_column_13  is-center   is-leaf is-sortable el-table__cell"
                                                style="background-color: rgb(255, 255, 255);">
                                                <div class="cell">执行日期<span class="caret-wrapper"><i
                                                        class="sort-caret ascending"></i><i
                                                        class="sort-caret descending"></i></span></div>
                                            </th>
                                            <th colspan="1" rowspan="1"
                                                class="el-table_1_column_14  is-center   is-leaf is-sortable el-table__cell"
                                                style="background-color: rgb(255, 255, 255);">
                                                <div class="cell">到期日期<span class="caret-wrapper"><i
                                                        class="sort-caret ascending"></i><i
                                                        class="sort-caret descending"></i></span></div>
                                            </th>
                                            <th colspan="1" rowspan="1"
                                                class="el-table_1_column_15  is-center   is-leaf is-sortable el-table__cell"
                                                style="background-color: rgb(255, 255, 255);">
                                                <div class="cell">是否提醒<span class="caret-wrapper"><i
                                                        class="sort-caret ascending"></i><i
                                                        class="sort-caret descending"></i></span></div>
                                            </th>
                                            <th colspan="1" rowspan="1"
                                                class="el-table_1_column_16  is-center   is-leaf is-sortable el-table__cell"
                                                style="background-color: rgb(255, 255, 255);">
                                                <div class="cell">添加时间<span class="caret-wrapper"><i
                                                        class="sort-caret ascending"></i><i
                                                        class="sort-caret descending"></i></span></div>
                                            </th>
                                            <th colspan="1" rowspan="1"
                                                class="el-table_1_column_17  is-center   is-leaf el-table__cell"
                                                style="background-color: rgb(255, 255, 255);">
                                                <div class="cell">操作</div>
                                            </th>
                                            <th class="el-table__cell gutter" style="width: 0px; display: none;"></th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                                <div class="el-table__body-wrapper is-scrolling-left">
                                    <table cellspacing="0" cellpadding="0" border="0" class="el-table__body"
                                           style="width: 1640px;">
                                        <colgroup>
                                            <col name="el-table_1_column_1" width="50">
                                            <col name="el-table_1_column_2" width="50">
                                            <col name="el-table_1_column_3" width="80">
                                            <col name="el-table_1_column_4" width="80">
                                            <col name="el-table_1_column_5" width="80">
                                            <col name="el-table_1_column_6" width="80">
                                            <col name="el-table_1_column_7" width="80">
                                            <col name="el-table_1_column_8" width="200">
                                            <col name="el-table_1_column_9" width="80">
                                            <col name="el-table_1_column_10" width="80">
                                            <col name="el-table_1_column_11" width="80">
                                            <col name="el-table_1_column_12" width="80">
                                            <col name="el-table_1_column_13" width="80">
                                            <col name="el-table_1_column_14" width="80">
                                            <col name="el-table_1_column_15" width="80">
                                            <col name="el-table_1_column_16" width="80">
                                            <col name="el-table_1_column_17" width="300">
                                        </colgroup>

                                    </table><!----><!----></div><!----><!----><!----><!---->
                                <div class="el-table__column-resize-proxy" style="display: none;"></div>
                                <div class="el-loading-mask" style="display: none;">
                                    <div class="el-loading-spinner">
                                        <svg viewBox="25 25 50 50" class="circular">
                                            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                        </svg><!----></div>
                                </div>
                            </div>
                            <div data-v-1ba59853=""
                                 class="pagination-content el-pagination is-background el-pagination--small"
                                 clsss="pages" style="text-align: left;"><span class="el-pagination__total">共 3 条</span><span
                                    class="el-pagination__sizes"><div class="el-select el-select--mini"><!----><div
                                    class="el-input el-input--mini el-input--suffix"><!----><input type="text"
                                                                                                   readonly="readonly"
                                                                                                   autocomplete="off"
                                                                                                   placeholder="请选择"
                                                                                                   class="el-input__inner">
                                <!----><span class="el-input__suffix"><span class="el-input__suffix-inner"><i
                                        class="el-select__caret el-input__icon el-icon-arrow-up"></i><!----><!---->
                                    <!----><!----><!----></span><!----></span><!----><!----></div><div
                                    class="el-select-dropdown el-popper" style="display: none; min-width: 110px;"><div
                                    class="el-scrollbar" style=""><div
                                    class="el-select-dropdown__wrap el-scrollbar__wrap"
                                    style="margin-bottom: -23px; margin-right: -23px;"><ul
                                    class="el-scrollbar__view el-select-dropdown__list"><!----><li
                                    class="el-select-dropdown__item selected"><span>10条/页</span></li><li
                                    class="el-select-dropdown__item"><span>20条/页</span></li><li
                                    class="el-select-dropdown__item"><span>50条/页</span></li><li
                                    class="el-select-dropdown__item"><span>100条/页</span></li></ul></div><div
                                    class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb"
                                                                                 style="transform: translateX(0%);"></div></div><div
                                    class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb"
                                                                               style="transform: translateY(0%);"></div></div></div>
                                <!----></div></div></span>
                                <button type="button" disabled="disabled" class="btn-prev"><i
                                        class="el-icon el-icon-arrow-left"></i></button>
                                <ul class="el-pager">
                                    <li class="number active">1</li><!----><!----><!----></ul>
                                <button type="button" disabled="disabled" class="btn-next"><i
                                        class="el-icon el-icon-arrow-right"></i></button>
                                <span class="el-pagination__jump">前往<div
                                        class="el-input el-input--medium el-pagination__editor is-in-pagination"><!----><input
                                        type="number" autocomplete="off" min="1" max="1" class="el-input__inner"><!---->
                                    <!----><!----><!----></div>页</span></div>
                        </div>
                    </div><!---->
                    <div data-v-1ba59853="" class="el-dialog__wrapper" style="display: none;">
                        <div role="dialog" aria-modal="true" aria-label="统计报表" class="el-dialog"
                             style="margin-top: 15vh;">
                            <div class="el-dialog__header"><span class="el-dialog__title">统计报表</span>
                                <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i
                                        class="el-dialog__close el-icon el-icon-close"></i></button>
                            </div><!---->
                            <div class="el-dialog__footer"><span data-v-1ba59853="" class="dialog-footer"><button
                                    data-v-1ba59853="" type="button"
                                    class="el-button el-button--default el-button--medium"><!----><!----><span>返回</span></button></span>
                            </div>
                        </div>
                    </div>
                </div>






                <!-- 支付按钮-->
                <button id="btn-recharge" class="main_backgroundColor" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}'  type="button" class="layui-btn layui-btn-lg btn-theme">
                    支付
                </button>

                <div class="pager" id="pager" :style="{textAlign:'center'}"></div>
            </div>
        </div>
        <!-- 个人中心 -->
    </div>

</div>

<!-- layui -->
<script src="../../layui/layui.js"></script>
<!-- vue -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>
<!-- 校验格式工具类 -->
<script src="../../js/validate.js"></script>
<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>
<!-- 校验格式工具类 -->
<script src="../../js/validate.js"></script>
<!-- 地图 -->
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>

<script>
    var jquery = $;

    var vue = new Vue({
        el: '#app',
        data: {
            // 轮播图
            swiperList: [{
                img: '../../img/banner.jpg'
            }],
            dataList: [],
            detail: {
                yonghuId: '',
                kehuId: '',
                hetongUuidNumber: new Date().getTime(),//数字
                hetongTypes: '',//数字
                hetongValue: '',//数字对应的值
                changduanTypes: '',//数字
                changduanValue: '',//数字对应的值
                hetongFile: '',
                baofeiDouble: '',
                baoeDouble: '',
                shouyirenName: '',
                shouyirenPhone: '',
                shouyirenIdNumber: '',
                shouyirenAddress: '',
                hetongContent: '',
                zhixingTime: '',
                daoqiTime: '',
                insertTime: '',
                createTime: '',
            },
            // 级联表的

            // 下拉框
            hetongTypesList: [],
            changduanTypesList: [],

            centerMenu: centerMenu
        },
        updated: function() {
            layui.form.render('select', 'myForm');
        },
        computed: {
        },
        methods: {
            jump(url) {
                jump(url)
            },
    logout(){
        localStorage.removeItem('Token');
        localStorage.removeItem('role');
        localStorage.removeItem('sessionTable');
        localStorage.removeItem('adminName');
        localStorage.removeItem('userid');
        localStorage.removeItem('userTable');
        localStorage.removeItem('iframeUrl');
        window.parent.location.href = '../login/login.html';
    }
        }
    })





    // 保险合同类型的查询
    function hetongTypesSelect() {
        //填充下拉框选项
        layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=hetong_types", "GET", {}, (res) => {
            if(res.code == 0){
                vue.hetongTypesList = res.data.list;
            }
        });
    }


    // 长短类型的查询
    function changduanTypesSelect() {
        //填充下拉框选项
        layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=changduan_types", "GET", {}, (res) => {
            if(res.code == 0){
                vue.changduanTypesList = res.data.list;
            }
        });
    }


</script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            // 轮播图
            swiperList: [],
            detail: {
                username: '',
                password: '',
                yonghuName: '',
                yonghuPhone: '',
                yonghuIdNumber: '',
                yonghuPhoto: '',
                sexTypes: '',//数字
                sexValue: '',//数字对应的值
                createTime: '',
            },
            sexTypesList: [],
            centerMenu: centerMenu
        },
        updated: function() {
            // layui.form.render(null, 'myForm');
        },
        methods: {
            jump(url) {
                jump(url)
            },
            logout(){
                localStorage.removeItem('Token');
                localStorage.removeItem('role');
                localStorage.removeItem('sessionTable');
                localStorage.removeItem('adminName');
                localStorage.removeItem('userid');
                localStorage.removeItem('userTable');
                localStorage.removeItem('iframeUrl');
                window.parent.location.href = '../login/login.html';
            }
        }
    })

    layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'laydate', 'form', 'upload'], function() {
        var layer = layui.layer;
        var element = layui.element;
        var carousel = layui.carousel;
        var http = layui.http;
        var jquery = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;

        // 获取轮播图 数据
        http.request('config/list', 'get', {
            page: 1,
            limit: 5
        }, function(res) {
            if (res.data.list.length > 0) {
                let swiperList = [];
                res.data.list.forEach(element => {
                    if (element.value != null) {
                        swiperList.push({
                            img: element.value
                        });
                    }
                });
                vue.swiperList = swiperList;
                vue.$nextTick(() => {
                    carousel.render({
                        elem: '#test1',
                        width: '100%',
                        height: '450px',
                        arrow: 'hover',
                        anim: 'default',
                        autoplay: 'true',
                        interval: '3000',
                        indicator: 'inside'
                    });
                })
                // vue.$nextTick(()=>{
                //   window.xznSlide();
                // });
            }
        });
        // 充值
        jquery('#btn-recharge').click(function(e) {
            layer.open({
                type: 2,
                title: '保险员充值',
                area: ['900px', '600px'],
                content: '../recharge/recharge.html'
            });
        });

        // 获取轮播图 数据
        http.request('config/list', 'get', {
            page: 1,
            limit: 5
        }, function(res) {
            if (res.data.list.length > 0) {
                var swiperItemHtml = '';
                for (let item of res.data.list) {
                    if (item.value != "" && item.value != null) {
                        swiperItemHtml +=
                            '<div>' +
                            '<img style="width: 100%;height: 100%;object-fit:cover;" class="swiper-item" src="' + item.value + '">' +
                            '</div>';
                    }
                }
                jquery('#swiper-item').html(swiperItemHtml);
                // 轮播图
                vue.$nextTick(() => {
                    carousel.render({
                        elem: '#swiper',
                        width: '100%',
                        height: '450px',
                        arrow: 'hover',
                        anim: 'default',
                        autoplay: 'true',
                        interval: '3000',
                        indicator: 'inside'
                    });

                })
                // carousel.render({
                // 	elem: '#swiper',
                // 	width: swiper.width,height:swiper.height,
                // 	arrow: swiper.arrow,
                // 	anim: swiper.anim,
                // 	interval: swiper.interval,
                // 	indicator: "none"
                // });
            }
        });


        // 查询字典表相关
        // 性别的查询和初始化
        sexTypesSelect();
        // 日期效验规则及格式
        dateTimePick();
        // 表单效验规则
        form.verify({
            // 正整数效验规则
            integer: [
                /^[1-9][0-9]*$/
                ,'必须是正整数'
            ]
            // 小数效验规则
            ,double: [
                /^[0-9]{0,6}(\.[0-9]{1,2})?$/
                ,'最大整数位为6为,小数最大两位'
            ]
        });


        // 上传 文件/图片
        // 保险员头像的文件上传
        var yonghuPhotoUpload = upload.render({
            //绑定元素
            elem: '#yonghuPhotoUpload',
            //上传接口
            url: http.baseurl + 'file/upload',
            // 请求头
            headers: {
                Token: localStorage.getItem('Token')
            },
            // 允许上传时校验的文件类型
            accept: 'images',
            before: function() {
                //loading层
                var index = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            },
            // 上传成功
            done: function(res) {
                console.log(res);
                layer.closeAll();
                if (res.code == 0) {
                    layer.msg("上传成功", {
                        time: 2000,
                        icon: 6
                    })
                    var url = http.baseurl + 'upload/' + res.file;
                    vue.detail.yonghuPhoto = url;
                } else {
                    layer.msg(res.msg, {
                        time: 2000,
                        icon: 5
                    })
                }
            },
            //请求异常回调
            error: function() {
                layer.closeAll();
                layer.msg("请求接口异常", {
                    time: 2000,
                    icon: 5
                })
            }
        });
        // 查询保险员信息
        let table = localStorage.getItem("userTable");

        if(!table){
            layer.msg('请先登录', {
                time: 2000,
                icon: 5
            }, function() {
                window.parent.location.href = '../login/login.html';
            });
        }

        http.request(`yonghu/session`, 'get', {}, function(data) {
            // 表单赋值
            // form.val("myForm", data.data);
            vue.detail = data.data
            // 图片赋值
            //jquery("#yonghuPhotoImg").attr("src", data.data.yonghuPhoto);
        });

        // 提交表单
        form.on('submit(*)', function(data) {
            data = vue.detail;
            data['createTime']=jquery("#createTime").val();
            http.requestJson(table + '/update', 'post', data, function(res) {
                layer.msg('修改成功', {
                    time: 2000,
                    icon: 6
                }, function() {
                    window.location.reload();
                });
            });
            return false
        });

    });

    // 日期框初始化
    function dateTimePick(){
    }




    //性别的查询
    function sexTypesSelect() {
        //填充下拉框选项
        layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", "GET", {}, (res) => {
            if(res.code == 0){
                vue.sexTypesList = res.data.list;
            }
        });
    }

</script>
</body>
</html>
